<template>
    <div>
<p id="myP">{{ msg }}</p>
<button @click="">切换</button>
    </div>
</template>

<script setup>
import { ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from 'vue';
let msg =ref('abc')
onBeforeMount(() => {
    console.log('---onBeforeMount---');
    let a=document.getElementById('myP');
                console.log(a);
});
onMounted(() => {
    console.log('---onMounted---');
    let a=document.getElementById('myP');
                console.log(a);
});
onBeforeUpdate(() => {
    console.log('---onBeforeUpdate---');
    let a=document.getElementById('myP');
                console.log(a);
});
onUpdated(() => {
    console.log('---onUpdated---');
    let a=document.getElementById('myP');
                console.log(a);
});
onBeforeUnmount(() => {
    console.log('---onBeforeUnmount---');
});
onUnmounted(() => {
    console.log('---onUnmounted---');
})
</script>

<style  scoped>

</style>